<template>
    <h2 style="text-align: center;">分页显示页面</h2>
    姓名：<input type="text" v-model="form2.name" class="form-inline" >
    手机号：<input type="text" v-model="form2.phone" class="form-inline" >
    <button class="btn btn-primary" @click="Show2">查询</button>
    <table class="table">
        <tbody>
            <tr class="bg-primary">
                <td>创造时间</td>
                <td>图片</td>
                <td>账号</td>
                <td>密码</td>
                <td>姓名</td>
                <td>手机号</td>
                <td>状态</td>
                <td>角色</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in showlist2" :key="item.mid">
                <td>{{item.createtime.substring(0,10)}}</td>
                <td><img :src="item.mimg" style="width: 100px;height: 100px;"></td>
                <td>{{item.zhanghao}}</td>
                <td>{{item.password}}</td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.del?"未完成":"已完成"}}</td>
                <td>{{item.player}}</td>
                <td>
                    <a href="javascript:void(0)" @click="del(item.mid)">删除</a>
                    <a href="javascript:void(0)" @click="upd(item.mid)" style="color: red;">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tr>
            <td>共{{form2.count}}条数据，每页{{form2.size}}条，当前{{form2.index}}/{{form2.page}}页</td>
            <td>
                <select v-model="form2.size">
                    <option :value="2">每页2条</option>
                    <option :value="3">每页3条</option>
                    <option :value="4">每页4条</option>
                </select>


                <a href="javascript:void(0)" @click="Showpage(1)">首页</a>
                <a href="javascript:void(0)" @click="Showpage(form2.index-1)">上一页</a>
                <a href="javascript:void(0)" v-for="item in form2.page" @click="Showpage(item)">{{item}}</a>
                <a href="javascript:void(0)" @click="Showpage(form2.index+1)">下一页</a>
                <a href="javascript:void(0)" @click="Showpage(form2.page)">尾页</a>
            </td>
            <td>
                <input type="text" v-model="form2.index" class="form-inline">
                <button @click="jump" class="btn btn-success">跳转</button>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';


const Showpage = (index:number) => {
    form2.index = index;
    Show2();
}

const upd = (mid:number) => {
    router.push("/updatelist?mid=" + mid);
}

const showsize = (size:number) => {
    form2.size = size;
    Show2();
}

const jump = (index:number) => {
    Showpage(Number(form2.index));
}

const del = (mid:number) => {
    if (confirm("确定要删除吗？")) {
        axios.post("https://localhost:7230/api/Message/del?mid="+mid).then(res => {
            if (res.data > 0) {
                alert("删除成功");
                Show2();
            }
            else {
                alert("删除失败");
                return;
            }
        })
    }
}

const form2 = reactive({
    index: 1,
    size: 2,
    count: 0,
    page: 0,
    name: "",
    phone:"",
})

const Show2 = () => {
    axios.get("https://localhost:7230/api/Message/Show", {
        params: {
                index: form2.index,
                size: form2.size,
                name: form2.name,
                phone:form2.phone,
        }
    }).then(res => {
        showlist2.value = res.data.list;
        form2.count = res.data.count;
        form2.page = res.data.page;
    })
}

const showlist2 = ref([]);

onMounted(() => {
    Show2();
})


</script>